<template>
    <s-layout id="layout" :title="'修改客户'" navbar="normal" leftIconColor="#ffffff" :autoBack="true" :bgColor="'rgba(0,0,0,0)'" :tabbarshow='false' :titleStyle="{ color: '#ffffff', fontSize: '32rpx',fontWeight:'600' }">
        <!-- 最大盒子 -->
        <view class="container" :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff/staff_project_arrange.png)`,paddingTop:(safeAreaInsets?.top + 44) + 'px'}">
            <view class="area form_box">
                <scroll-view scroll-y style="height: 70vh" :enable-back-to-top="true">
                    <u--form :labelStyle="labelStyle" labelPosition="left" :model="FormData" :rules="rules" ref="formRole" :borderBottom="false">
                        <!-- 项目名称 -->
                        <u-form-item required="true" :borderBottom="false" :labelWidth="100" label="部门名称：" prop="project_id" ref="project_id">
                            <u--input clearable="false" disabledColor="rgba(0,0,0,0)" disabled inputAlign="right" type="text" placeholder="请选择部门" v-model="project_title" border="none"></u--input>
                        </u-form-item>

                        <!-- 部门周期 -->
                        <u-form-item required="true" :borderBottom="false" :labelWidth="100" label="项目周期：" prop="date_range" ref="date_range">
                            <view class="date_range" @tap="dateRange">
                                <view class="date_image">
                                    <image :src="`${baseUrl}/uploads/uniapp_image/staff/class_icon01.png`"  mode="scaleToFill"/>
                                </view>
                                <view class="range_time">{{ FormData.date_range ? FormData.date_range : '请选择项目周期' }}</view>
                            </view>
                        </u-form-item>

                        <!-- 备注 -->
                        <u-form-item labelPosition="top" :borderBottom="false" :labelWidth="100" label="备注：" prop="remark" ref="remark">
                            <up-textarea :placeholderStyle="{color:'#8080a1',fontSize:'30rpx'}" height="45" v-model="FormData.remark" placeholder="请输入备注" ></up-textarea>
                        </u-form-item>

                        <!-- 循环 -->
                        <view v-for="(item, index) of FormData.data" :key="index">
                            <!-- 客户信息 -->
                            <view class="message">
                                客户信息{{index + 1}}
                                <view class="glide"></view>
                                <view class="delete" @tap="deleteCustomerInformation(index)" v-show="FormData.data.length != 1">删除</view>
                            </view>

                            <!-- 客户名称 -->
                            <u-form-item required="true" :borderBottom="false" :labelWidth="100" label="客户名称：" prop="name" ref="name">
                                <u--input :clearable="false" inputAlign="right" type="text" placeholder="请输入" v-model.lazy="item.name" border="none"></u--input>
                            </u-form-item>

                            <!-- 电话 -->
                            <u-form-item required="true" :borderBottom="false" :labelWidth="100" label="电话：" prop="item.mobile" ref="mobile">
                                <u--input :clearable="false" inputAlign="right" type="number" placeholder="请输入" v-model.lazy="item.mobile" border="none"></u--input>
                            </u-form-item>

                            <!-- 岗位: -->
                            <u-form-item required="true" :borderBottom="false" :labelWidth="100" label="岗位：" prop="item.post" ref="post">
                                <u--input :clearable="false" inputAlign="right" type="text" placeholder="请输入" v-model.lazy="item.post" border="none"></u--input>
                            </u-form-item>
                        </view>

                        <!-- 添加客户 -->
                        <view class="add_customer" @tap="addFormData(index)">
                            +  添加客户
                        </view>
                    </u--form>
                </scroll-view>
            </view>
        </view>

    </s-layout>

    <!-- 底部保存按钮 -->
    <view>
        <s-button @leftNetWork="DeleteProjectCustomer" @rightNetWork="alterCustomer"  :leftWidth="'30%'" :rightWidth="'70%'" :type="'twobutton'" :oneText="'删除'" :twoText="'保存修改'" />
    </view>
    <!-- 日期范围 -->
    <up-calendar :monthNum="12" :closeOnClickOverlay="true" :show="show" :mode="mode" @confirm="confirm" @close="close"></up-calendar>
    <!-- 模态框 -->
    <up-modal :showCancelButton="true" :show="modal_show" :content='content' @confirm="modal_confirm" @cancel="modal_cancel"></up-modal>
</template>

<script setup>
    import sheep from '@/sheep';
    import { ref, reactive } from 'vue';
    import { onLoad } from '@dcloudio/uni-app';
    import { baseUrl } from "@/sheep/config";
    const { safeAreaInsets } = uni.getSystemInfoSync()
    onLoad((option) => {
        ids.value = option.id
        project_title.value = option.title
        let params = {
                ids: option.id,
        };
        customerViewData(params);
    })

    // 表单数据
    const ids = ref()
    const FormData = reactive({
        ids:'',
        data:[],
        remark:'',
        date_range:''
    })

    // 表单校验
    const rules = {
        date_range:[
            {
                required:true,
                message:'请选择项目周期',
            }
        ],
        // name:[
        //     {
        //         required:true,
        //         message:'请输入客户名称',
        //     }
        // ],
        // mobile:[
        //     {
        //         required:true,
        //         message:'请输入电话号码'
        //     },
        //     {
        //         validator: (rule, value, callback) => {
        //             const reg = /^[1][3,4,5,7,8][0-9]{9}$/; // 手机号正则表达式
        //             if (!reg.test(value)) {
        //                 callback(new Error('请输入正确的电话号码'));
        //             } else {
        //                 callback();
        //             }
        //         }
        //     }
        // ],
        // post:[
        //     {
        //         required:true,
        //         message:'请输入岗位名称'
        //     }
        // ]
    }

    // 调用接口：客户管理详情
    const CustomerParticulars = ref()
    const customerViewData = async (params = null) => {
        const res = await sheep.$api.customer.customerViewAPI(params);
        CustomerParticulars.value = res.data
        FormData.ids = CustomerParticulars.value.id
        FormData.remark = CustomerParticulars.value.remark
        FormData.date_range = CustomerParticulars.value.date_range
        CustomerParticulars.value.customerdata.forEach(item => {
            FormData.data.push({
                name: item.name,
                mobile: item.mobile,
                post: item.post,
                customer_id:item.customer_id,
                id:item.id
            })
        })
    }

    // 增加客户信息表单
    let annexlist = ref([
		[]
	]);
    const addFormData = (index) => {
			FormData.data.push({
                customer_id:ids.value,
				name: '',
				mobile: '',
				post: '',
			});
		annexlist.value[index + 1] = [];
	}

    // 删除客户信息表单
    const deleteCustomerInformation = (index) => {
        FormData.data.splice(index,1)
    }

    // 项目周期弹出
    const show = ref(false)
    const mode = ref('range')
        // 选择完成
    const confirm = (e) => {
        FormData.date_range = `${e[0]}~${e[e.length - 1]}`
        show.value = false
    }
        // 关闭
    const close = () => {
        show.value = false
    }
        // 打开
    const dateRange = () => {
        show.value = true
    }

    // 子组件触发的方法将项目title改变
    const project_title  = ref('')

    // 删除当前客户详情
    const modal_show = ref(false)
    const content = ref('确定是否删除？')
    // 点击删除按钮打开模态框
    const DeleteProjectCustomer = () => {
        modal_show.value = true
    }

    // 模态框 点击确定按钮的时候触发
    const modal_confirm = () => {
        let params = {
            ids: ids.value,
        };
        customerDelete(params)
        modal_show.value = false

    }

    // 模态框 点击取消按钮的时候触发
    const modal_cancel = () => {
        modal_show.value = false
    }

    // 调用接口：客户管理删除
    const customerDelete = async (params = null) => {
        const res = await sheep.$api.customer.customerDelAPI(params)
        if(res.code == 1) {
            setTimeout(() => {
                sheep.$router.back(true)
            },1000)
        } else {
            setTimeout(() => {
                sheep.$helper.toast(res.msg);
            },1000)
        }
    }


    // 修改当前客户详情
    const formRole = ref(null);
    const alterCustomer = () => {
        formRole.value.validate().then(async (res)=> {
            const resust = await sheep.$api.customer.customerEditAPI(FormData);
            if(resust.code == 1) {
                setTimeout(() => {
                    uni.navigateBack()
                },1000)
            } else {
                setTimeout(() => {
                    sheep.$helper.toast(resust.msg);
                },1000)
            }
        }).catch((err) => {
            sheep.$helper.toast('请仔细核对内容！');
         
        })
    }

</script>

<style lang="scss" scoped>

    :deep(.u-form-item__body.data-v-b4fd400b){
        height: 80rpx;
        margin-bottom:10rpx;
        background-color: #F9FAFF;
    }

    :deep(.u-textarea.data-v-31706dd7) {
        background-color: #F9FAFF;
        padding: 0;
    }

    // uview 内部样式 输入内容右边间距
    :deep(.u-input__content__field-wrapper__field.data-v-5904192e) {
        margin-right: 20rpx;
    }

    // uview 内部样式 label左边间距
    :deep(.u-form-item__body__left.data-v-b4fd400b) {
        margin-left: 20rpx;
    }

    // uview 内部样式 label字体粗细
    :deep(.u-form-item__body__left__content__label.data-v-b4fd400b) {
        font-weight: $uni-font-weight;
    }

    // 最大盒子
    .container {
        width: 100%;
        background-size: cover; /* 或 contain */
    }
    // 版心
    .area {
        width: calc(100% - 40rpx);
        // padding: 0 20rpx;
        margin: 0 20rpx;
        // height: 90vh;
    }

    // 表单盒子
    .form_box {
        width: calc(100% - 100rpx);
        // height: 50vh;
        padding: 60rpx 30rpx;
        margin-top: 20rpx;
        border-radius: 16rpx;
        background-color: #FFFFFF;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
        // 信息
        .message {
            display: flex;
            justify-content: space-between; /* 左右对齐 */
            // width: 200rpx;
            width: 100%;
            height: 48rpx;
            margin: 30rpx 0;
            font-family: PingFangSC;
            color: $uni-text-color;
            font-weight: $uni-font-weight;
            font-size: 34rpx;
            font-style: normal;
            text-decoration: none;
            position: relative;
            .glide {
                width: 92rpx;
                height: 14rpx;
                border-radius: 5px;
                background-color: rgba(0, 56, 247, 0.5);
                position: absolute;
                bottom: 0;
                left: 20rpx;
                right: 0;
            }
            // 删除按钮
            .delete {
                width: 100rpx;
                height: 48rpx;
                background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
                text-align: center;
                line-height: 48rpx;
                border-radius: 10rpx;
                color: $uni-bg-color;
                font-size: 30rpx;
                font-weight: 500;
            }
        }
        // 项目周期
        .date_range {
            height: 64rpx;
            width: 420rpx;
            border-radius: 16rpx;
            border: 4rpx solid #1241E2;
            display: flex;
            align-items: center;
            // 图片
            .date_image {
                width: 28rpx;
                height: 28rpx;
                margin-left: 20rpx;
                margin-right: 12rpx;
                image {
                    width: 100%;
                    height: 100%;
                }
            }
            // 时间
            .range_time {
                font-family: PingFangSC;
                color: $uni-color-primary;
                font-weight: $uni-font-weight;
               font-size:$uni-font-size-26;
                font-style: normal;
                text-decoration: none;
                text-align: right;
            }
        }
        // 添加客户盒子
        .add_customer {
            // width: 100%;
            height: 60rpx;
            border-radius: 16rpx;
            border: 2rpx solid $uni-color-primary;
            text-align: center;
            line-height: 60rpx;
            font-family: PingFangSC;
            color: $uni-color-primary;
            font-weight: $uni-font-weight;
            font-size: 22rpx;
            font-style: normal;
            text-decoration: none;
            margin: 30rpx 0;
        }
    }
</style>
